<template>
	<view class="page-wrapper history" :data-theme="theme">
		<view class="history_count">
			<block v-if="list.length > 0">
				<view class="history_header acea-row">
					<text>共{{ total }}条，最多为您保存100条</text>
				</view>
				<view class="list" v-for="(item, index) in list">
					<view class="item_time">
						<view>{{ item.date }}</view>
					</view>
					<view class="item_main acea-row">
						<view class="item acea-row" :class="{ gary: !itemn.isDel && itemn.isShow == 1 }" v-for="(itemn, indexn) in item.list">
							<view class="item item_count" @click="goPage(itemn)">
								<view class="pictrue">
									<easy-loadimage class="easy-img" mode="widthFix" :image-src="itemn.image"></easy-loadimage>
									<view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture"></view>
								</view>
								<view class="info">
									<view class="msg">
										<block v-if="!itemn.isDel && itemn.isShow">
											<view class="price line2">
												<text></text>
												￥{{ itemn.price }}
											</view>
										</block>
										<block v-else-if="itemn.isDel">
											<view class="tips">该商品已删除</view>
										</block>
										<block v-else>
											<view class="tips">该商品已下架</view>
										</block>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="list.length == 0 && !loading">
				<emptyPage title="暂无浏览记录~" :imgSrc="urlDomain + 'crmebimage/presets/noJilu.png'"></emptyPage>
			</block>
			<view class="loadingicon acea-row row-center-wrapper">
				<text class="loading iconfont icon-jiazai" :hidden="loading == false"></text>
			</view>
		</view>
	</view>
</template>

<script>
import emptyPage from '@/components/emptyPage.vue';
import { browseRecordApi, historyDelete, historyBatchDelete, historyBatchCollect } from '@/api/user.js';
import { goShopDetail } from '@/libs/order.js';
import { mapGetters } from 'vuex';
import animationType from '@/utils/animationType.js';
import easyLoadimage from '@/components/base/easy-loadimage.vue';
let app = getApp();
export default {
	components: {
		emptyPage,
		easyLoadimage
	},
	computed: mapGetters(['uid', 'globalData']),
	data() {
		return {
			urlDomain: this.$Cache.get('imgHost'),
			list: [],
			allArr: [],
			total: 0,
			theme: app.globalData.theme,
			loading: true
		};
	},
	onLoad() {
		this.getList();
	},
	methods: {
		getList() {
			this.list = [];
			browseRecordApi()
				.then(({ data }) => {
					this.list = data;
					data.map((item) => {
						this.total += item.list.length;
						item.date = item.date.slice(5, 7) + '月' + item.date.slice(8, 10) + '日';
					});
					this.loading = false;
				})
				.catch((err) => {
					this.loading = false;
					return this.$util.Tips({
						title: err
					});
				});
		},
		goPage(item) {
			if (!item.isShow) return;
			goShopDetail(item.productId);
		}
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit('scroll');
	}
};
</script>

<style lang="scss" scoped>
.pictrue {
	position: relative;
}
page {
	background: #ffffff;
}

.history {
	margin-bottom: 96rpx;

	.history_count {
		padding: 0 30rpx;
	}

	.history_header {
		justify-content: space-between;
		margin: 30rpx 0;

		text {
			font-size: 26rpx;
			color: #666666;
		}

		.text {
			color: var(--view-theme);
		}
	}

	.list {
		margin-top: 20rpx;

		.item_time {
			font-size: 36rpx;
			color: #282828;
			font-weight: bold;
			display: flex;
			align-items: center;
		}

		.item_main {
			margin-top: 30rpx;
		}
	}

	.item {
		width: 217rpx;
		border-radius: 16rpx;
		margin: 0 20rpx 20rpx 0;
		position: relative;

		&:nth-child(3n) {
			margin-right: 0;
		}

		/deep/image,
		/deep/.easy-loadimage,
		uni-image {
			width: 217rpx;
			height: 217rpx;
			border-radius: 16rpx;
		}

		.info {
			margin-top: 20rpx;
			color: var(--view-priceColor);
			font-size: 24rpx;
		}
	}
}

/deep/.loadfail-img,
.easy-img {
	width: 217rpx;
	height: 217rpx;
	border-radius: 16rpx;
	display: block;
}

.item_time .checkbox .iconfont {
	font-size: 38rpx;
	color: #999999;
	margin-right: 10rpx;

	&.icon-xuanzhong1 {
		color: var(--view-theme);
	}
}

.item_main .checkbox .iconfont {
	font-size: 40rpx;
	color: #dedede;
	position: absolute;
	right: 12rpx;
	top: 12rpx;
	z-index: 10;
	border-radius: 100%;

	&.icon-weixuanzhong {
		&::after {
			content: '';
			display: block;
			width: 36rpx;
			height: 36rpx;
			background: rgba(0, 0, 0, 0.38);
			position: absolute;
			top: 2rpx;
			left: 2rpx;
			border-radius: 100%;
			border: 1rpx solid #dedede;
		}
	}
}

.history .item .icon-xuanzhong1 {
	color: var(--view-theme);
}

.history .footer {
	z-index: 99;
	width: 100%;
	height: 96rpx;
	background-color: #ffffff;
	position: fixed;
	padding: 0 20rpx;
	box-sizing: border-box;
	border-top: 1rpx solid #eee;
	bottom: var(--window-bottom);
}

.area-edit {
	justify-content: center;

	.area-item {
		width: 50%;
		text-align: center;
		position: relative;
		align-items: center;
		color: #333333;

		.text {
			position: relative;
			top: -1px;
		}

		.iconfont {
			color: #333333;
		}

		&:nth-child(1) {
			&::after {
				content: '';
				display: inline-block;
				width: 2rpx;
				height: 42rpx;
				background: #cccccc;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
}

.history .footer .checkAll {
	font-size: 28rpx;
	color: #282828;
	margin-left: 16rpx;
}

.allcheckbox .iconfont {
	margin-right: 11px;
	font-size: 40rpx;
	color: #cccccc;
}

.allcheckbox .icon-xuanzhong1 {
	color: var(--view-theme);
}

.history .footer .button .bnt {
	font-size: 28rpx;
	color: #999;
	border-radius: 50rpx;
	border: 1px solid #999;
	width: 160rpx;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;

	&.collect_btn {
		color: var(--view-theme);
		border-color: var(--view-theme);
	}
}
.empty-box {
	margin-top: 60%;
}
</style>
